<template>
  <div>
    <a-card title="">
      <a-row >
        <a-col :span="9">
          <div id="myChart" style=" width:100%; height: 300px;"></div>
          <div id="myChart2" style=" width:100%; height: 300px;"></div>
        </a-col>
        <a-col :span="15">
          <a-table :columns="columns" :data-source="data">
            <a slot="name" slot-scope="text">{{ text }}</a>
            <span slot="customTitle"><a-icon type="smile-o"/> Name</span>
            <span slot="tags" slot-scope="tags">
      <a-tag
        v-for="tag in tags"
        :key="tag"
        :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
      >
        {{ tag.toUpperCase() }}
      </a-tag>
    </span>
            <span slot="action" slot-scope="text, record">
      <a>Invite 一 {{ record.name }}</a>
      <a-divider type="vertical"/>
      <a>Delete</a>
      <a-divider type="vertical"/>
      <a class="ant-dropdown-link"> More actions <a-icon type="down"/> </a>
    </span>
          </a-table>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
  import { getLoginfo, getVisitInfo } from '@/api/api'
  import { deleteAction, postAction, getAction, downFile } from '@/api/manage'
  const columns = [
    {
      title: '项目名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '采购订单号',
      dataIndex: 'poNo',
      key: 'poNo',
    },
    {
      title: '签订时间',
      dataIndex: 'qdsj',
      key: 'qdsj',
    },
    {
      title: '承接单位',
      dataIndex: 'cjdw',
      key: 'cjdw',
    },
    {
      title: '合同数量',
      dataIndex: 'htsl',
      key: 'htsl',
    },
    {
      title: '交货日期',
      dataIndex: 'jhrq',
      key: 'jhrq',
    },
    {
      title: '关注等级',
      dataIndex: 'gzdj',
      key: 'gzdj',
    },
  ];

  const data = [
    {
      key: '1',
      name: '江苏徐州御窑(新沂西)',
      poNo: 4501262253,
      qdsj:'2020-08-01',
      cjdw:'平高电气',
      htsl:'2',
      jhrq:'2020-07-05',
      gzdj:'7.5级'
    },
    {
      key: '2',
      name: '220kv输变电工程',
      poNo: 4501262253,
      qdsj:'2020-08-01',
      cjdw:'平芝公司',
      htsl:'2',
      jhrq:'2020-07-05',
      gzdj:'7.5级'
    },
    {
      key: '3',
      name: '浙江电气公司',
      poNo: 4501262253,
      qdsj:'2020-08-01',
      cjdw:'天津平高其他',
      htsl:'2',
      jhrq:'2020-07-05',
      gzdj:'7.5级'
    },
    {
      key: '4',
      name: '翼北电力',
      poNo: 4501262253,
      qdsj:'2020-08-01',
      cjdw:'通用电气',
      htsl:'2',
      jhrq:'2020-07-05',
      gzdj:'7.5级'
    },
  ];

  export default {
    data() {
      return {
        loading: true,
        data,
        columns,
        data2: [],
        data1: [],
        pagination: {
          hideOnSinglePage: true
        },
        indicator: < a-icon type = 'loading' style = 'font-size: 24px' spin / >
    }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)

    },
    methods: {
      drawLine(data) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption(
          {
            title: {
              text: '产品维度合同统计',
              subtext: '',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              left: 'center',
              top: 'bottom',
              data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
            },

            series: [
              {
                name: '面积模式',
                type: 'pie',
                radius: [30, 110],
                // center: ['75%', '50%'],
                roseType: 'area',
                data: [
                  { value: 10, name: '开关柜' },
                  { value: 5, name: '环网柜' },
                  { value: 15, name: '隔离开关' },
                  { value: 25, name: '断路器' },
                  { value: 40, name: '组合电器' }
                ]
              }
            ]
          }
        )
      },
      drawLine2(data) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart2'))
        // 绘制图表
        myChart.setOption(
          {
            title: {
              text: '各单位承接重要项目统计',
              subtext: '',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              left: 'center',
              top: 'bottom',
              data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
            },
            series: [
              {
                name: '面积模式',
                type: 'pie',
                radius: [30, 110],
                 // center: ['75%', '50%'],
                roseType: 'area',
                data: [
                  { value: 10, name: '平高电气' },
                  { value: 5, name: '平芝公司' },
                  { value: 15, name: '通用电气' },
                  { value: 20, name: '天津平高(其他)' }
                ]
              }
            ]
          }
        )
      },
    },
    mounted() {
      getAction('/index/ordersList').then((res) => {
        this.drawLine(res.data)
      })

      getAction('/index/sccjList').then((res) => {
        this.drawLine2(res.data)
      })
      getAction('/index/sysjList').then((res) => {
        this.drawLine3(res.data)
      })
    }
  }
</script>

<style lang="scss" scoped>
</style>